<script setup lang="ts">
import { endRunningLaps } from '@/api'
import { isRainTask, taskId } from '@/business/carMarker'

import { activeNoProcessAlarm, alarmStatus } from '@/composables/useNotification'
import { useCarStore } from '@/stores/car'
import { ElMessage } from '@/stores/elMessage'
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
const carStore = useCarStore()
</script>

<template>
  <el-card class="flex-1" shadow="always" header="算法操作" style="--el-card-padding: 0">
    <div class="flex flex-col w-48 p-1">
      <span class="inline-block">
        <el-switch
          class="w-full"
          v-model="alarmStatus"
          :active-text="t('shi-bie-kai-qi')"
          :inactive-text="t('shi-bie-guan-bi')"
          :activeValue="1"
          :inactiveValue="0"
          @Change="
            async () => {
              activeNoProcessAlarm()
            }
          "
        />
      </span>

      <el-button
        size="small"
        class="mt-2"
        v-show="isRainTask"
        @click="
          async () => {
            const res: any = await endRunningLaps(carStore.currentCar, taskId)
            ElMessage({
              type: 'success',
              message: res.message
            })
            if (res.code === 200) {
              isRainTask = false
            }
          }
        "
        >{{ t('jie-shu-pao-quan') }}
      </el-button>
    </div>
  </el-card>
</template>

<style scoped lang="scss">
:deep(.el-card__header) {
  padding: 0 0 0 10px;
  font-size: small;
  // border-bottom: none;
}
</style>
